<script lang="ts">
	/**
	 * Badge 组件 - 用于显示角标、徽章等提示信息
	 * 支持多种尺寸、变体和位置设置
	 *
	 * @example
	 * <Badge value="99" variant="primary" size="md" position="top" />
	 * <Badge dot variant="error" position="top" />
	 * <Badge>内容</Badge>
	 */

	// 定义组件属性类型
	interface BadgeProps {
		/**
		 * 显示的值，可以是字符串或数字
		 */
		value?: string | number;
		/**
		 * 是否显示为点状徽章
		 */
		dot?: boolean;
		/**
		 * 尺寸：sm（小）、md（中，默认）、lg（大）
		 */
		size?: 'sm' | 'md' | 'lg';
		/**
		 * 变体类型：info、primary、secondary、success、warning、error
		 */
		variant?: 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
		/**
		 * 位置：top（上）、middle（中）、bottom（下）
		 */
		position?: 'top' | 'middle' | 'bottom';
		/**
		 * 是否显示徽标
		 */
		show?: boolean;
		/**
		 * 最大值，超过最大值会显示 {max}+，仅当 value 为数字时有效
		 */
		max?: number;
		/**
		 * 缩放比例
		 */
		scale?: number;
		/**
		 * 默认插槽
		 */
		children?: any;
	}

	// 使用 Svelte 5 Runes 定义属性
	const {
		value = '',
		dot = false,
		size = 'md',
		variant = 'primary',
		position = 'top',
		show = true,
		max = 99,
		scale = 0.75,
		children
	}: BadgeProps = $props();

	// 计算显示的值
	const isEmptyValue = $derived(value === undefined || value === null || value === '');
	const displayValue = $derived(
		dot || isEmptyValue ? '' : typeof value === 'number' && value > max ? `${max}+` : String(value)
	);

	// 计算 CSS 类名
	const badgeClass = $derived(
		[
			'badge',
			`badge--${size}`,
			`badge--${variant}`,
			`badge--${position}`,
			dot ? 'badge--dot' : '',
			!show ? 'badge--hidden' : ''
		]
			.filter(Boolean)
			.join(' ') // 过滤空字符串，拼接为最终类名
	);
	// 组件顶部定义常量
	const DOT_ARIA_LABEL = '提示点';
	const DOT_ROLE = 'status';
</script>

<div class="badge-wrapper" style:transform={`scale(${scale})`}>
	{#if children}
		{@render children()}
	{/if}

	{#if show && (dot || displayValue)}
		<span
			class={badgeClass}
			aria-label={dot ? DOT_ARIA_LABEL : displayValue}
			role={dot ? DOT_ROLE : undefined}
		>
			{#if !dot}
				{displayValue}
			{/if}
		</span>
	{/if}
</div>

<style lang="scss">
	.badge-wrapper {
		position: relative;
	}

	.badge {
		position: absolute;
		transform: translate(50%, -50%);
		font-size: var(--badge-font-size, 13px);
		font-weight: 600;
		line-height: var(--badge-height, 18px);
		white-space: nowrap;
		text-align: center;
		border-radius: var(--badge-border-radius, 9px);
		padding: var(--badge-padding, 0 8px);
		min-width: var(--badge-min-width, 18px);
		height: var(--badge-height, 18px);
		color: #fff;
		background-color: var(--badge-bg-color);

		// 位置变体
		&--top {
			top: 0;
			right: 0;
		}

		&--middle {
			top: 50%;
			right: 0;
			transform: translate(50%, -50%);
		}

		&--bottom {
			top: 100%;
			right: 0;
			transform: translate(50%, 0);
		}

		// 尺寸变体
		&--sm {
			--badge-font-size: 12px;
			--badge-padding: 0 6px;
			--badge-min-width: 16px;
			--badge-height: 16px;
			--badge-border-radius: 8px;
		}

		&--md {
			--badge-font-size: 13px;
			--badge-padding: 0 8px;
			--badge-min-width: 18px;
			--badge-height: 18px;
			--badge-border-radius: 9px;
		}

		&--lg {
			--badge-font-size: 14px;
			--badge-padding: 0 10px;
			--badge-min-width: 20px;
			--badge-height: 20px;
			--badge-border-radius: 10px;
		}

		// 变体类型
		&--primary {
			--badge-bg-color: var(--color-primary-500);
		}

		&--info {
			--badge-bg-color: var(--color-info-500);
		}

		&--secondary {
			--badge-bg-color: var(--color-secondary-500);
		}

		&--success {
			--badge-bg-color: var(--color-success-500);
		}

		&--warning {
			--badge-bg-color: var(--color-warning-500);
		}

		&--error {
			--badge-bg-color: var(--color-error-500);
		}

		// 点状样式
		&--dot {
			padding: 0;
			min-width: var(--badge-dot-size, 8px);
			height: var(--badge-dot-size, 8px);
			border-radius: 50%;

			&.badge--sm {
				--badge-dot-size: 6px;
			}

			&.badge--md {
				--badge-dot-size: 8px;
			}

			&.badge--lg {
				--badge-dot-size: 10px;
			}
		}

		// 隐藏状态
		&--hidden {
			display: none;
		}
	}

	// 无障碍支持
	.badge:focus {
		outline: 2px solid var(--color-primary-500);
		outline-offset: 2px;
	}

	// 响应式调整
	@media (max-width: 768px) {
		.badge {
			&--lg {
				--badge-font-size: 12px;
				--badge-padding: 0 6px;
				--badge-min-width: 20px;
				--badge-height: 20px;
			}
		}
	}
</style>
